<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jun
 * @Date: 2021-06-04 14:51:33
 * @LastEditors: Jun
 * @LastEditTime: 2021-06-04 17:07:44
-->
<template>
  <el-dialog
    title="提示"
    :visible.sync="codeDialogVisible"
    width="30%"
    :before-close="close"
  >
    <div>
      <el-form :model="codeForm" :rules="codeFormRules" ref="codeForm">
        <el-form-item label="请输入验证码" prop="code">
          <el-input v-model="codeForm.code">
            <template v-if="!showTime">
              <el-button slot="append" @click="sendCode" type="primary"
                >发送验证码</el-button
              >
            </template>
            <template v-else>
              <el-button slot="append" disabled>{{ time }}秒</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="submit('codeForm')"
        :loading="submitLoading"
        >提交</el-button
      >
      <el-button @click="close">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { url } from "api/sendCode.js";
import { saveUrl } from "api/examList.js";
export default {
  props: {
    codeDialogVisible: {
      //是否显示弹窗
      type: Boolean,
      required: true,
    },
    examDetails: {
      //考试信息
      type: Object,
      required: true,
    },
    userInfo: {
      //用户信息
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      codeForm: {
        //短信表单
        code: "",
      },
      codeFormRules: {
        //短信校验
        code: [
          { required: true, message: "请输入短信验证码", trigger: "blur" },
        ],
      },
      time: 5, //倒计时时间
      showTime: false, //显示倒计时
      submitLoading: false, //提交loading
    };
  },
  methods: {
    close() {
      this.$emit("update:codeDialogVisible", false);
    },
    API_sendCode() {
      //发送验证码接口
      return this.$httpRequest({
        url: url,
        method: "POST",
        data: {},
      });
    },
    API_save(data, code) {
      //报考接口
      return this.$httpRequest({
        url: saveUrl,
        method: "POST",
        data: {
          data: data,
          param: {
            code: code,
          },
        },
      });
    },
    async sendCode() {
      //发送验证码
      let res = await this.API_sendCode();
      if (res.data.code === 1000) {
        this.$message.success(res.data.msg);
      } else {
        this.$message.error(res.data.msg);
      }

      this.showTime = true;
      let timeHandler = setInterval(() => {
        if (this.time <= 0) {
          clearInterval(timeHandler);
          this.showTime = false;
          this.time = 5;
        } else {
          this.time--;
        }
      }, 1000);
    },
    submit(formName) {
      //提交表单
      this.submitLoading = true;

      this.$parent.$refs.publicForm.update(); //更新用户信息,调用公共表单的更新方法

      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let userInfo = JSON.parse(JSON.stringify(this.userInfo)); //用户信息
          let emid = userInfo.id; //用户id
          userInfo.emid = emid;
          delete userInfo.id;

          let examDetails = JSON.parse(JSON.stringify(this.examDetails)); //考试详细信息
          let eid = examDetails.id; //考试id
          examDetails.eid = eid;
          delete examDetails.id;

          //合并对象
          let data = Object.assign({}, examDetails, userInfo, {
            form: this.form,
          });

          let res = await this.API_save(data, this.codeForm.code); //提交表单
          if (res.data.code === 1000) {
            this.$message.success(res.data.msg);
            this.$router.replace("/signUpList");
          } else {
            this.$message.error(res.data.msg);
          }
          this.submitLoading = false;
          this.codeDialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
</style>